<template>
  <div id="searchVoucher">
    <down-tip></down-tip>
    <header-bar :title="title" :searchIocn="searchIcon" :helpTip="helpTip"></header-bar>
    <div class="container" :class="{'transform':showStyle}">
      <div class="sqt_header">
        <img v-src="'/static/img/search_bg.png'" alt="" style="width:100%;">
        <div class="sqt_box">
          <div class="search_box clearfix">
            <form class="fl search_info" @submit.prevent="submit" action=".">
              <i class="icon-search2"></i>
              <input @focus="onFocus"
                     @blur="onBlur"
                     type="search"
                     v-model="inputVal"
                     placeholder="输入您想买的宝贝名(如:电风扇)"
                     class="search">
              <i @click="clearInput" v-show="inputVal" class="icon_clear"></i>
            </form>
            <div @click="goSearch" class="fr go_search" id="go_search">找券</div>
            <!---->
            <div v-show="showHistory" class="search_list">
              <ul>
                <li @click="searchHistoryClick(item)" v-show="index<6 && !inputVal" class="vux-1px-b"
                    v-for="(item,index) in searchHistory">
                  <a href="javascript:void(0)">
                    <div class="search_item">{{item}}</div>
                  </a>
                </li>
                <li @click="searchHistoryClick(item)" v-show="index<6" class="vux-1px-b"
                    v-for="(item,index) in searchResult">
                  <a href="javascript:void(0)">
                    <div class="search_item">{{item[0]}}</div>
                  </a>
                </li>
              </ul>
              <div class="search_do vux-1px-t clearfix">
                <div v-show="!inputVal" class="fl" @click="clearHistory">
                  <i style="vertical-align:middle" class="icon-bin"></i>
                  清除搜券记录
                </div>
                <span class="fr" @click="closeSearch">关闭</span>
              </div>
            </div>
            <!-- /搜索栏 -->
            <!-- 黏贴板 -->
            <div v-show="false" class="copy_box" id="copy_box">
              <i class="arrow_top"></i>
              <p class="com_ell">你可能想找 : <span id="copy_info"></span></p>
              <div class="close_box" id="close_box"><i class="icons icon_close2"></i></div>
            </div>
            <!-- /黏贴板 -->
          </div>
          <p class="sqt_number">{{tips}}</p>
        </div>
      </div>
      <div class="tickets">
        <div class="top clearfix">
          <span class="fl">择友们都在找券</span>
          <div @click="shuffle(keyWordsList)" class="fr change vux-1px">
            <span class="icon-loop2" :class="{'addTransition':isTransition}"></span>
            <span>换一换</span>
          </div>
        </div>
        <div class="listBox">
          <div v-show="index<8" @click="toGoResult(item)" v-for="(item,index) in keyWordsList" :key="index"
               class="history_list">{{item}}
          </div>
        </div>
      </div>
      <div class="goods">
        <div class="top-title">
          商品券分类
        </div>
        <div class="good-list-box">
          <div @click="typeGosearchList(item.id)" v-for="(item,index) in goodsList" class="list-item vux-1px">
            <div class="txt_box">
              <p class="p1">{{item.name}}</p>
              <p class="p2 oneLine">{{item.subTitle}}</p>
            </div>
            <div class="img_box">
              <img v-src="item.pic" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <tab-bar :activeIndex="activeIndex"></tab-bar>
  </div>
</template>
<script>
  import TabBar from 'src/components/common/TabBar.vue'
  import HeaderBar from 'src/components/common/headerBar.vue'
  import DownTip from 'src/components/common/downTip'
  import {URI_BEFORESEARCH} from 'src/const/uri'
  import {getStore, setStore} from 'src/assets/js/md-utils'
  import jsonp from 'jsonp'

  export default {
    components: {TabBar, HeaderBar, DownTip},
    data() {
      return {
        title: '搜惠券',
        searchIcon: false,
        helpTip: true,
        activeIndex: 2,
        keyWordsList: [],
        goodsList: [],
        inputVal: '',
        tips: '',
        showStyle: false,
        isTransition: false,
        searchHistory: [],
        showHistory: false,
        searchResult: [],
      }
    },
    created() {
      this.$ajax.get(URI_BEFORESEARCH, {
        promotionTypeId: 6
      }, (res) => {
        // console.log(res.data);
        this.keyWordsList = res.data.keyWords;
        this.goodsList = res.data.cat;
        this.tips = res.data.tip;
      });
    },
    mounted() {
      let spinner = document.getElementsByClassName('spinner')[0];
      spinner.style.display = 'none';
      /*获取本地数据*/
      if (getStore('searchHistory')) {
        this.searchHistory = JSON.parse(getStore('searchHistory'));
        //console.log(this.searchHistory);
      }
    },
    watch: {
      inputVal(val) {
        let _this = this;
        jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${val}`,
          function (err, res) {
            console.log(res);
            _this.searchResult = res.result;
            console.log(_this.searchResult);
          })
      }
    },
    methods: {
      shuffle(arr) {
        var len = arr.length;
        for (var i = 0; i < len - 1; i++) {
          var idx = Math.floor(Math.random() * (len - i));
          var temp = arr[idx];
          arr[idx] = arr[len - i - 1];
          arr[len - i - 1] = temp;
        }
        console.log(arr);
        this.isTransition = !this.isTransition;
        this.keyWordsList = [];
        this.keyWordsList = arr;
      },
      clearInput() {
        this.inputVal = '';
      },
      /*热门点击*/
      toGoResult(item) {
        let beforeUrl = document.URL.replace(/searchVoucher/g, "searchVoucher/searchRouslt").split('?')[0];
        let toUrl = `${beforeUrl}?key=${item}`;
        window.location.href = toUrl;
      }
      ,
      /*点击找券*/
      goSearch() {
        if (this.inputVal) {
          let beforeUrl = document.URL.replace(/searchVoucher/g, "searchVoucher/searchRouslt").split('?')[0];
          let toUrl = `${beforeUrl}?key=${this.inputVal}`;
          window.location.href = toUrl;
        } else {
          this.$vux.toast.show({type: 'text', text: '关键词不能为空，请重新输入'});
        }

      }
      ,
      /*enter 提交input*/
      submit() {
        if (this.inputVal) {
          let beforeUrl = document.URL.replace(/searchVoucher/g, "searchVoucher/searchRouslt").split('?')[0];
          let toUrl = `${beforeUrl}?key=${this.inputVal}`;
          window.location.href = toUrl;
        } else {
          this.$vux.toast.show({type: 'text', text: '关键词不能为空，请重新输入'});
        }

      },
      /*商品id 分类点击跳转*/
      typeGosearchList(id) {
        let beforeUrl = document.URL.replace(/searchVoucher/g, "searchVoucher/searchRouslt").split('?')[0];
        let toUrl = `${beforeUrl}?typeId=${id}`;
        window.location.href = toUrl;
      },
      searchHistoryClick(item) {
        let beforeUrl = document.URL.replace(/searchVoucher/g, "searchVoucher/searchRouslt").split('?')[0];
        if (item.length > 0) {
          let toUrl = `${beforeUrl}?key=${item[0]}`;
          window.location.href = toUrl;
        } else {
          let toUrl = `${beforeUrl}?key=${item}`;
          window.location.href = toUrl;
        }


      },

      onBlur() {

      },
      onFocus() {
        console.log('聚焦点')
        this.showStyle = true;
        // console.log(this.searchHistory);
        if (this.searchHistory != '') {
          this.showHistory = true;
        }

      },
      closeSearch() {
        this.showStyle = false;
        this.showHistory = false;
      },
      clearHistory() {
        let _this = this;
        this.$vux.confirm.show({
          title: '温馨提示',
          content: '确认清空全部历史记录',
          onCancel() {

          },
          onConfirm(msg) {
            _this.searchHistory = [];
            setStore('searchHistory', _this.searchHistory);
            _this.showHistory = false
          }
        });
      }
    }

  }
</script>
<style lang="less" scoped>
  @import "searchVoucher";

  .container {
    transform: translateY(0);
    transition: transform .3s;
    &.transform {
      transform: translateY(-70px)
    }
  }
</style>
